<template>
  <el-form :label-width="width + 'px'" :model="formData" ref="formRef">
    <!-- 动态生成选项 -->
    <template v-for="(item, i) in formItem">
      <el-form-item
        :key="i"
        :label="item.label"
        :label-width="item.width ? item.width + 'px' : ''"
        :prop="item.field"
        :rules="item.rules"
      >
        <!-- input -->
        <template v-if="item.type === 'input'">
          <el-input
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :prefix-icon="item.icon"
          />
        </template>
        <!-- input -->

        <!-- password -->
        <template v-if="item.type === 'password'">
          <el-input
            v-model="formData[item.field]"
            type="password"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :prefix-icon="item.icon"
          />
        </template>
        <!-- password -->

        <!-- select -->
        <template v-if="item.type === 'select'">
          <el-select
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
          >
            <el-option
              v-for="(tmp, tmpI) in item.payload"
              :key="tmpI"
              :label="tmp.label"
              :value="tmp.value"
            >
            </el-option>
          </el-select>
        </template>
        <!-- select -->
      </el-form-item>
    </template>
    <!-- 动态生成选项 -->

    <!-- 动态生成按钮 -->
    <el-form-item>
      <template v-for="(btn, btnI) in formBtns">
        <el-button
          :key="btnI"
          :type="btn.type"
          @click="handleSubmit(btn.content, btn.click, btn.icon)"
          :icon="btn.icon"
        >
          {{ btn.content }}
        </el-button>
      </template>
    </el-form-item>
    <!-- 动态生成按钮 -->
  </el-form>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 0,
    },
    formItem: {
      type: Array,
      required: true,
    },
    formBtns: {
      type: Array,
      required: true,
    },
    row: {
      // 切记为啥不是必须，原因 创建也会调用公共组件
      type: Object,
      default: null,
    },
  },
  watch: {
    row: {
      handler(newData) {
        if (!newData) return;
        // this.formData = newData
        this.formData = { ...newData };
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleSubmit(content, callback, icon) {
      if (icon) {
        return callback();
      }

      switch (content) {
        case "重置":
          this.$refs.formRef.resetFields();
          return;
        default:
          // 其他
          this.$refs.formRef.validate((isSuccess) => {
            console.log("验证结果：", isSuccess);
            if (isSuccess) {
              // console.log(this.formData);
              callback(this.formData);
            }
          });
          break;
      }
    },
  },
  data() {
    return {
      formData: {},
    };
  },
};
</script>
